<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader @adds='addFN' :arr="list"></TodoHeader>
    <TodoMain :arr='showArr' @el="elFN"></TodoMain>
    <TodoFooter :arr="showArr" @love='btn' @qing='qingFN'></TodoFooter>
  </section>
</template>

<script>
  import TodoHeader from "./components/TodoHeader";
  import TodoMain from "./components/TodoMain";
  import TodoFooter from "./components/TodoFooter";

  import "./styles/base.css"
  import "./styles/index.css"
  export default {
    components: {
      TodoHeader,
      TodoMain,
      TodoFooter,
    },
    data() {
      return {
        ayok: 'all',
        list: JSON.parse(localStorage.getItem('todolist')) || [],
      };
    },
    methods: {
      addFN(name) { //添加
        this.list.push({
          id: this.list.length === 0 ? 100 : this.list[this.list.length - 1].id + 1,
          name: name,
          isDone: false,
        });
      },
      elFN(index) { //删除
        this.list.splice(index, 1)
      },
      btn(str) { //切换
        this.ayok = str
      },
      qingFN() {
        this.list = this.list.filter(val => val.isDone == false)
      }
    },
    computed: { //计算 返回给main什么属性
      showArr() {
        if (this.ayok === 'ok') {
          return this.list.filter(val => val.isDone == true)
        } else if (this.ayok === 'no') {
          return this.list.filter(val => val.isDone == false)
        } else {
          return this.list
        }
      }
    },
    watch: { //监听本地存储
      list: {
        handler(newAll) {
          localStorage.setItem('todolist', JSON.stringify(newAll))
        },
        deep: true
      }
    }
  };
</script>